<template>
  <div class="my-represent-detail" @click.stop>
    <!-- <div class="title">我的代言</div> -->
    <div class="content">
      <div class="order-item">
        <div class="tip">代言订单</div>
        <div class="represent-cell" v-if="orderInfo.hasOwnProperty('img_show')">
          <div class="left">
            <img :src="orderInfo.img_show" alt />
          </div>
          <div class="right">
            <div class="cell-name">{{orderInfo.name}}</div>
            <div class="order-no">
              <span>订单号：{{orderInfo.order_no}}</span>
              <span class="cell-price">￥{{orderInfo.price}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="check">
        <div class="noResult" v-if="!fileList.length">
          <img src="@/assets/待入账收益-assets/no_message.png" alt />
          <p>暂无上传记录</p>
          <div class="button" @click="refresh">刷新</div>
        </div>
        <div class="check-list" v-else>
          <ul>
            <li v-for="(item, index) of fileList" :key="index">
              <div class="left">
                <p>{{ item.created_at.split(' ')[1] }}</p>
                <p>{{ item.created_at.split(' ')[0] }}</p>
              </div>
              <div class="right">
                <div class="right-img" @click="showOverlay(item)">
                  <img :src="item.image" alt />
                </div>
                <p>已经上传照片</p>
                <p
                  style="color: red; margin-left: 1.5rem"
                  @click="handleStatusChange(item)"
                >{{ setStatusText(item) }}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="operation">
        <div class="apply-cash" @click="applyCashClick" :class="{'active': canApply }">申请提现</div>
        <div class="picture" :class="{'disable': inputDisable}">
          拍摄代言照片
          <input
            class="takePicture"
            type="file"
            accept="image/*"
            capture="camera"
            @change="uploadChange"
            :disabled="inputDisable"
          />
        </div>
      </div>
    </div>
    <overlay-img ref="imgOverlay" :imgUrl="image" />
    <tip-overlay ref="tipOverlay" :applyTipText1="applyTipText1" :applyTipText2="applyTipText2" />
  </div>
</template>
<script>
import {
  getRepresentOrderDetail,
  uploadFile,
  representUpload,
  getUploadFileList,
  judgeCash,
  getCashStatus
} from "@/api/represent";
import OverlayImg from "./img-overlay";
import TipOverlay from "./tip-overly";
import moment from "moment";
const ERR_OK = 200;
let myMoment = moment().locale("zh-cn");
export default {
  components: {
    OverlayImg,
    TipOverlay
  },
  data() {
    return {
      my_id: "",
      status: "",
      applyStatus: "",
      applyTipText1: "",
      applyTipText2: "",
      inputDisable: true,
      applySuccess: false,
      pass: false,
      fileList: [],
      canApply: "",
      image: "",
      orderInfo: {},
      list: [
        {
          time: "10:05",
          date: "2020-4-13",
          img: require("@/assets/represent/vespid.jpeg")
        },
        {
          time: "10:05",
          date: "2020-4-13",
          img: require("@/assets/represent/vespid.jpeg")
        },
        {
          time: "10:05",
          date: "2020-4-13",
          img: require("@/assets/represent/vespid.jpeg")
        }
      ]
    };
  },
  created() {
    this._getRepresentOrderDetail(this.$route.query.id);
    this._getUploadFileList(this.$route.query.id);
  },
  methods: {
    refresh() {
      window.location.reload();
    },
    handleStatusChange(item) {
      if (parseInt(item.status) === 4) {
        this.status = item.status;
        document.querySelector(".takePicture").click();
      }
    },
    setStatusText(item) {
      this.status = item.status;
      this.my_id = item.id;
      if (item.status === 1) {
        return "审核中";
      }
      if (item.status === 2 || item.status === 3) {
        return "";
      }
      if (item.status === 4) {
        return "重新拍照";
      }
    },
    uploadChange() {
      let file = document.querySelector(".takePicture").files[0];
      let formdata = new FormData();
      formdata.append("file", file);
      this._uploadFile(formdata)
        .then(() => {
          if (this.status === 4) {
            this._representUpload({
              image: this.image,
              id: this.$route.query.id,
              status: 4,
              my_id: this.my_id
            });
          } else {
            this._representUpload({
              image: this.image,
              id: this.$route.query.id
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    showOverlay(item) {
      this.$refs.imgOverlay.show();
      this.image = item.image;
    },
    applyCashClick() {
      if (this.canApply === 0) {
        this.$dialog.toast({
          mes: "您目前未满足提现条件",
          timeout: 1000
        });
      } else if (this.canApply === 1) {
        if (!this.applySuccess) {
          this._judgeCash({
            order_id: this.$route.query.id,
            refund_amount: this.payment
          })
            .then(res => {
              this.applySuccess = true;
              this.$dialog.toast({
                mes: res.data.message,
                timeout: 1000
              });
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          this._getCashStatus(this.$route.query.id);
        }
      }

      //   this.$refs.tipOverlay.show();
    },
    _getCashStatus(order_id) {
      getCashStatus(order_id)
        .then(res => {
          console.log(res);
          this.applyStatus = res.data.data.status;
          // 	1=待审核 2=待打款 3=已打款 4=已拒绝
          // this.applyStatus = 3
          if (this.applyStatus === 1) {
            this.applyTipText1 = "系统审核中";
            this.applyTipText2 = "您已经提交申请，三个工作日内答复";
          } else if (this.applyStatus === 3) {
            this.applyTipText1 = "申请成功";
            this.applyTipText2 = "您的代言返现已到账，可在余额查询";
          }
          this.$refs.tipOverlay.show();
        })
        .catch(err => {
          console.log(err);
        });
    },
    _getRepresentOrderDetail(id) {
      getRepresentOrderDetail(id)
        .then(res => {
          if (res.data.code === ERR_OK) {
            console.log(res);
            this.orderInfo = res.data.data;
            this.canApply = res.data.data.is_can;
            if (this.canApply === 1) {
              this.inputDisable = true;
            }
            // this.canApply = 1;
            this.payment = res.data.data.payment;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    _uploadFile(photo) {
      return uploadFile(photo)
        .then(res => {
          if (res.data.code === ERR_OK) {
            this.image = res.data.data.file;
            return Promise.resolve(res);
          }
        })
        .catch(err => {
          console.log(err);
          return Promise.reject(err);
        });
    },
    _representUpload({ image, id, status, my_id }) {
      return representUpload({ image, id, status, my_id })
        .then(res => {
          if (res.data.code === ERR_OK) {
            if (res.data.data.status === 1) {
              this.inputDisable = true;
            }
            // status 反馈状态: 2=已审核 1=待审核 3=无需审核 4=已拒绝
            if (this.status === 4) {
              this.fileList[0].image = this.image;
              this.fileList.created_at = `${myMoment.format(
                "YYYY.MM.DD"
              )} ${myMoment.format("HH:mm")}`;
              this.fileList[0].status = 1;
            } else {
              this.fileList.push({
                created_at: `${myMoment.format("YYYY.MM.DD")} ${myMoment.format(
                  "HH:mm"
                )}`,
                image: this.image,
                status: res.data.data.status
              });
            }

            this.$dialog.toast({
              mes: "提交成功",
              timeout: 1000
            });
            return Promise.resolve(res);
          }
        })
        .catch(err => {
          console.log(err);
          return Promise.reject(err);
        });
    },
    _getUploadFileList(order_id) {
      getUploadFileList(order_id)
        .then(res => {
          if (res.data.code === ERR_OK) {
            if (
              !res.data.data.length ||
              res.data.data[0].status === 2 ||
              res.data.data[0].status === 4
            ) {
              this.inputDisable = false;
            } else if(res.data.data[0].status === 1) {
              this.$dialog.toast({
                mes: "第一张图审批中，三个工作日内答复",
                timeout: 3000
              });
              this.inputDisable = true
            }
            this.fileList = res.data.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    _judgeCash({ order_id, refund_amount }) {
      return judgeCash({ order_id, refund_amount })
        .then(res => {
          if (res.data.code === ERR_OK) {
            console.log(res);
            return Promise.resolve(res);
          }
        })
        .catch(err => {
          console.log(err);
          return Promise.reject(err);
        });
    }
  }
};
</script>
<style lang="less" scoped>
.my-represent-detail {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #f5f5f5;
  z-index: 99;
  touch-action: none;
  // overflow: hidden;
  .title {
    height: 1.8rem;
    border-bottom: 1px solid #dfdfdf;
    width: 100%;
    font-size: 0.64rem;
    text-align: center;
    font-weight: bold;
    line-height: 1.8rem;
    background: #fff;
  }
  .content {
    padding: 0.32rem 0.48rem;
    box-sizing: border-box;
    overflow-y: auto;
    .order-item {
      position: relative;
      height: 6rem;
      .represent-cell {
        display: flex;
        align-items: center;
        padding: 1rem 0;
        background: #fff;
        border-radius: 0.2rem;
        height: 6rem;
        .left {
        }
        .right {
          height: 2rem;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .cell-price {
            color: red;
            margin-left: 0.4rem;
            font-weight: bold;
          }
        }
      }
      .tip {
        position: absolute;
        top: 0;
        background: red;
        color: #fff;
        padding: 3px 5px;
        border-top-left-radius: 16px;
        border-bottom-right-radius: 16px;
      }
    }
    .check {
      width: 100%;
      height: 58vh;
      background: rgba(255, 255, 255, 1);
      border-radius: 0.2rem;
      background: #fff;
      margin-top: 0.48rem;
      position: relative;
      .noResult {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        p {
          font-size: 0.64rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(68, 68, 68, 1);
          margin-top: 1.56rem;
          text-align: center;
          margin-bottom: 1.24rem;
        }
        .button {
          width: 5.36rem;
          height: 1.48rem;
          background: rgba(65, 64, 65, 1);
          border-radius: 0.15rem;
          margin: 0 auto;
          font-size: 0.64rem;
          line-height: 1.48rem;
          text-align: center;
          font-family: PingFang SC;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
    .check-list {
      padding: 0.8rem 0.64rem;
      box-sizing: border-box;
      height: 100%;
      overflow-y: auto;
      ul {
        li {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 1rem;
          text-align: center;
          .left {
            margin-right: 0.8rem;
            width: 2.5rem;
            p {
              font-size: 0.4rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: rgba(68, 68, 68, 1);
              margin-bottom: 0.1rem;
              &:nth-child(1) {
                font-weight: bold;
              }
            }
          }
          .right {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            .right-img {
              width: 1.62rem;
              height: 1.62rem;
              overflow: hidden;
              img {
                height: 100%;
              }
            }
            p {
              font-size: 0.56rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: rgba(68, 68, 68, 1);
              margin-left: 0.64rem;
            }
          }
        }
      }
    }
    .operation {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      margin-top: 1rem;
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0.5rem;
      padding: 0 0.48rem;
      box-sizing: border-box;
      .apply-cash {
        width: 6.7rem;
        height: 1.4rem;
        background: rgba(170, 170, 170, 1);
        border-radius: 1rem;
        font-size: 0.6rem;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 1.4rem;
        color: rgba(255, 255, 255, 1);
        &.active {
          background: #414041;
          color: #fff;
        }
      }
      .picture {
        width: 6.7rem;
        height: 1.4rem;
        background: rgba(234, 50, 37, 1);
        border-radius: 1rem;
        font-size: 0.6rem;
        line-height: 1.4rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        position: relative;
        &.disable {
          background: rgba(170, 170, 170, 1);
        }
        .takePicture {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
          border: none;
          outline: none;
        }
      }
    }
  }
}
</style>